<template>
  <div>
    <van-cell
      :value="roomTypeIsSueHome || '请选择'"
      is-link
      @click="homeTypeShow = true"
    >
      <template #title> 户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型 </template>
    </van-cell>
    <!-- 不能写里面否则冒泡冒到外卖呢 -->
    <van-popup
      v-model="homeTypeShow"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-picker
        show-toolbar
        :columns="roomType"
        @cancel="homeTypeShow = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "roomType",
  data() {
    return {
      roomType: ["一室", "二室", "三室", "四室", "四室+"],
      homeTypeShow: false,
      roomTypeIsSueHome: "",
    };
  },
  props: {
    releaseHomeData: {
      type: [Object, String],
      default: () => ({}),
    },
  },
  methods: {
    onConfirm(value) {
      console.log(1111, this.releaseHomeData.roomType);
      const filerItem = this.releaseHomeData.roomType.filter((item) => {
        return item.label === value;
      });
      this.$emit("homeType", filerItem);
      this.roomTypeIsSueHome = filerItem[0].label;
      this.homeTypeShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.van-cell__title) {
  font-size: 14px;
}
</style>
